Three tiers of grey

When I removed the accent colour from this site, I expected to miss it. What I actually missed was the excuse it gave me. An accent lets you mark something as important without deciding where it sits relative to everything else. Take it away and you have to rank the whole page.

The three

Ink is the thing you came for: titles, the row you are looking for, the first word of every sentence you will actually read. Muted is everything you read second: body copy, descriptions, the sentence under the title. Faint is everything you read only when you need it: dates, years, section labels, the meta on the right-hand edge.

The trick is that the tiers are not evenly spaced. Against this background they land at roughly 16:1, 8:1 and 5:1. Doubling the contrast at each step is what makes them read as separate ranks rather than as three slightly different greys, and it is why a fourth tier never works — there is nowhere left to put it that is both distinguishable from faint and still legible.

Five to one is a floor, not a target

The temptation with the faint tier is to keep pushing it down. Dates want to disappear. But 4.5:1 is the accessibility floor for small text, and a year in a 13px column is small text, so the bottom tier is pinned there whether or not my eye wants it dimmer on a good monitor at midnight.

The useful consequence is that you cannot solve a hierarchy problem by dimming something further. If the meta still competes with the title, the answer is size, weight, position or a different typeface — never another 5% off the grey. That constraint has improved more of my layouts than any amount of freedom would have.

Warmth is the fourth variable

Pure neutral greys on a pure neutral black look like a terminal. Every value here carries a little warmth, and the background carries the most — it is nearer to iron than to ink. It never reads as a colour, which is the point. It just stops the page feeling like a switched-off screen.

Three tiers, one warm cast, no hue. It turns out that is a complete visual system for a site whose job is to be read.